<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <img
                            src="@/assets/img/sys_manage.svg"
                            class="logo"
                        >
                    </el-col>
                    <el-col :span="17">
                        <h1>浩奇公司管理系统</h1>
                    </el-col>
                    <el-col :span="4">
                        <span class="quit-login" @click="logout">退出登录</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="110px">
                    <el-menu
                        background-color="#2C3E50"
                        class="el-menu-vertical-demo"
                        default-active="2"
                        router
                    >
                        <el-menu-item
                            :index="item.path"
                            v-for="item in list"
                            :key="item.path"
                        >
                            <span :style="{
                                fontSize: isActive(item.path) ? '18px' : '16px',
                                fontWeight: isActive(item.path) ? 'bold' : 'normal',
                                color: isActive(item.path) ? '#2C3E50' : '#FFF',
                                backgroundColor: isActive(item.path) ? '#FFF' : '', 
                                padding: isActive(item.path) ? '1px 19px' : '', 
                                marginLeft: isActive(item.path) ? '-20px' : '', 
                                lineHeight: isActive(item.path) ? '3' : ''
                            }">{{ item.meta.title }}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 设置路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { useRouter } from "vue-router";

export default {
    name: "onsite_Home",
    setup() {
        const router = useRouter();
        const onsiteHomeRoute = router.getRoutes().find(route => route.name === 'onsite_Home');
        const list = onsiteHomeRoute && onsiteHomeRoute.children ? onsiteHomeRoute.children.filter(v => v.meta.isShow) : [];
        const isActive = (path) => {
            return router.currentRoute.value.path === path;
        };

        const logout = () => {
            router.push("/worker_login");
        }
        return { list, isActive, logout }
    },
}
</script>

<style lang="scss" scoped>
.el-header {
    height: 60px;
    background-color: #2C3E50;

    .logo {
        height: 55px;
    }

    .quit-login {
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #FFF;
    }

    h1 {
        text-align: center;
        font-size: 25px;
        line-height: 60px;
        color: #FFF;
        font-weight: bold;
    }
}

.el-aside {
    .el-menu {
        height: calc(100vh - 60px);
    }
}
</style>
